<template>
	<view class="container">
		<view class="container-head">
			<!-- 演唱会图片 -->
			<image :src="concertDetail.image" mode="aspectFill" class="concert-image"></image>
			<view class="container-head-r">
				<!-- 演唱会标题 -->
				<view class="concert-title">{{ concertDetail.title }}</view>
				<view class="concert-txt">
					华宇流行音乐一座难以逾越的丰碑
				</view>
				<view class="concert-btn">
					+ 关注
				</view>
			</view>
		</view>

		<!-- 巡演计划路线图 -->
		<view class="tour-plan">
			<view class="timeline">
				<view v-for="(plan, index) in concertDetail.tourPlans" :key="index" class="plan-item" @click="goPage('/page_home/planDetail')">
				<view class="timeline-dot" v-if="index%2==0"></view>
					<view class="plan-title">
						<view class="plan-city">{{ plan.city }}</view>
						<view class="plan-price">￥<text class="plan-price-text">{{ plan.price }}</text>起</view>
					</view>
					<view class="plan-time">{{ plan.time }}</view>
					<view class="plan-addr">珠江三角洲自媒体体育场</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 演唱会详情数据
				concertDetail: {
					image: require('@/static/img/zjl.jpg'), // 演唱会图片URL
					title: '2023年全球巡演 - 城市之声', // 演唱会标题
					tourPlans: [{
							city: '北京',
							time: '2023-10-01 19:00',
							price: '299'
						},
						{
							city: '上海',
							time: '2023-10-05 20:00',
							price: '399'
						},
						{
							city: '广州',
							time: '2023-10-10 18:30',
							price: '349'
						},
						{
							city: '深圳',
							time: '2023-10-15 19:30',
							price: '399'
						}
					]
				}
			};
		},
		methods:{
			goPage(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	};
</script>

<style scoped lang="less">
	page {
		height: 100%;
		background: linear-gradient(to bottom, #D2B48C, #8B4513);
		background-attachment: fixed;
		background-image: url('../static/img/plan-bg.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: top center;
	}

	.container {
		height: 100%;
		padding: 20px;
		box-sizing: border-box;

		.container-head {
			display: flex;
			align-items: center;
			color: white;

			.container-head-r {
				margin-left: 20rpx;
				height: 300rpx;


				.concert-title {
					font-size: 48rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.concert-txt {
					opacity: .6;
					font-size: 26rpx;
					margin-bottom: 20rpx;
				}
				.concert-btn{
					width:150rpx;
					height:60rpx;
					display:flex;
					align-items: center;
					justify-content: center;
					border:2rpx solid #ffffff;
					font-size: 26rpx;
					border-radius:60rpx;
									}
			}
		}
		.tour-plan{
			margin-top:20rpx;
		}
	}

	.concert-image {
		width: 300rpx;
		height: 300rpx;
		border-radius: 10rpx;
	}

	.section-title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.timeline {
		position: relative;
		padding-left: 40rpx;
		.plan-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.timeline::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 4rpx;
		height: 100%;
		background-color: #e0e0e0;
	}
.timeline-dot {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  left: -48rpx;
  top: 0rpx;
}
	.plan-item {
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		position:relative;
	}

	.plan-city {
		font-size: 36rpx;
	}

	.plan-time {
		font-size: 28rpx;
		margin-top: 10rpx;
	}
	.plan-addr{
		color: #666;
		margin-top: 10rpx;
		font-size: 28rpx;
		
	}
	.plan-price {
		font-size: 24rpx;
		color: #e74c3c;
		.plan-price-text{
		font-size: 30rpx;
		margin-right: 5rpx;
			
		}
	}
</style>